<template>
  <!-- <AssetBriefCard :row="row" :nameKey="设备基本信息" :columns="4" /> -->
  <AssetInfoCard :row="row"  :columns="4" height="66vh"/>

  <!-- <UsageRelationChart ref="chartRef" :data="chartData" :height="520" /> -->
</template>

<script setup>
import AssetBriefCard from './AssetBriefCard.vue'
import AssetInfoCard from './AssetInfoCard.vue'
import UsageRelationChart from './UsageRelationChart.vue'

defineProps({ row: { type: Object, default: () => ({}) } })


const rowData = {
  enableTime: '2024-01-10 08:00:00',
  disableTime: null,
  useSegments: [
    { dept: '生产部', start: '2024-01-10 08:00:00', end: '2024-03-02 18:00:00' },
    { dept: '质检部', start: '2024-03-05 09:00:00', end: '2024-05-20 18:00:00' },
  ],
  idleSegments: [
    { start: '2024-03-02 18:00:00', end: '2024-03-05 09:00:00' }
  ]
}


const chartRef = ref(null)

/** 真实项目里可将 props.row 映射成下列结构；这里做了兜底模拟 */
const chartData = computed(() => {
  // 如果父级传入可用数据，就在这里从 row 映射成 UsageRelationChart 所需结构
  // 示例：return mapRowToChartData(props.row)

  // —— 无数据时：提供一份稳定的演示数据 —— //
  return {
    enableTime: '2024-01-10 08:00:00',
    disableTime: null,
    useSegments: [
      { dept: '生产部', start: '2024-01-10 08:00:00', end: '2024-03-02 18:00:00' },
      { dept: '质检部', start: '2024-03-05 09:00:00', end: '2024-05-20 18:00:00' }
    ],
    idleSegments: [
      { start: '2024-03-02 18:00:00', end: '2024-03-05 09:00:00' }
    ]
  }
})
 


</script>
